<template>
  <div id="app">
    <el-container>
      <el-header>
        <h1>产品管理系统</h1>
        <p>演示共享组件和工具库在不同应用中的使用</p>
      </el-header>
      
      <el-main>
        <el-tabs v-model="activeTab" type="border-card">
          <!-- 产品列表标签页 -->
          <el-tab-pane label="产品列表" name="products">
            <div class="section-header">
              <h2>产品信息</h2>
              <el-button type="primary" @click="addProduct">
                <el-icon><Plus /></el-icon>
                添加产品
              </el-button>
            </div>
            
            <el-row :gutter="16">
              <el-col v-for="product in products" :key="product.id" :span="8">
                <!-- 复用Customer组件来展示产品信息 -->
                <Customer
                  :customer="transformProductToCustomer(product)"
                  @view="viewProduct"
                  @edit="editProduct"
                >
                  <template #extra="{ customer }">
                    <div class="product-extra">
                      <p><strong>价格:</strong> ¥{{ product.price }}</p>
                      <p><strong>库存:</strong> {{ product.stock }}</p>
                      <p><strong>分类:</strong> {{ product.category }}</p>
                    </div>
                  </template>
                  
                  <template #actions="{ customer }">
                    <el-button size="small" @click="viewProduct(product)">
                      查看
                    </el-button>
                    <el-button size="small" type="primary" @click="editProduct(product)">
                      编辑
                    </el-button>
                    <el-button size="small" type="success" @click="toggleStock(product)">
                      {{ product.status === 'active' ? '下架' : '上架' }}
                    </el-button>
                  </template>
                </Customer>
              </el-col>
            </el-row>
          </el-tab-pane>

          <!-- 客户列表标签页 -->
          <el-tab-pane label="客户列表" name="customers">
            <div class="section-header">
              <h2>客户信息</h2>
              <el-button type="primary" @click="addCustomer">
                <el-icon><Plus /></el-icon>
                添加客户
              </el-button>
            </div>
            
            <el-row :gutter="16">
              <el-col v-for="customer in customers" :key="customer.id" :span="8">
                <!-- 直接使用Customer组件 -->
                <Customer
                  :customer="customer"
                  @view="viewCustomer"
                  @edit="editCustomer"
                >
                  <template #extra="{ customer }">
                    <div class="customer-extra">
                      <p><strong>订单数:</strong> {{ customer.orderCount || 0 }}</p>
                      <p><strong>消费额:</strong> ¥{{ customer.totalAmount || 0 }}</p>
                    </div>
                  </template>
                </Customer>
              </el-col>
            </el-row>
          </el-tab-pane>

          <!-- 工具演示标签页 -->
          <el-tab-pane label="工具演示" name="utils">
            <div class="utils-demo">
              <h2>共享工具库演示</h2>
              
              <el-card class="demo-card">
                <h3>日期格式化工具</h3>
                <p>当前时间: {{ formatDate(new Date()) }}</p>
                <p>相对时间: {{ getRelativeTime(yesterday) }}</p>
              </el-card>

              <el-card class="demo-card">
                <h3>验证工具</h3>
                <el-input
                  v-model="testEmail"
                  placeholder="输入邮箱测试验证"
                  style="width: 300px; margin-right: 16px;"
                />
                <el-tag :type="isEmail(testEmail) ? 'success' : 'danger'">
                  {{ isEmail(testEmail) ? '邮箱格式正确' : '邮箱格式错误' }}
                </el-tag>
              </el-card>

              <el-card class="demo-card">
                <h3>其他工具</h3>
                <p>生成ID: {{ generateId('product') }}</p>
                <p>数组去重: {{ uniqueArray([1, 2, 2, 3, 3, 4]).join(', ') }}</p>
              </el-card>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import  'module-b'
import { ApiService } from '@admin/shared-services';


// 导入共享组件和工具
import { Customer } from '@admin/shared-components'
import { 
  formatDate, 
  getRelativeTime, 
  isEmail, 
  generateId, 
  uniqueArray 
} from '@admin/shared-utils'

export default {
  name: 'App',
  components: {
    Customer,
    Plus
  },
  setup() {
    const activeTab = ref('products')
    const testEmail = ref('test@example.com')


    ApiService.fetchData('/api/products').then(res=>{
      console.log(res);
    }).catch(error=>{
      console.error('Error fetching data:', error);
    })
    
    // 模拟产品数据
    const products = ref([
      {
        id: 'P001',
        name: 'iPhone 15',
        email: 'product@apple.com', // 为了复用Customer组件
        phone: '400-666-8800',
        status: 'active',
        createTime: '2024-01-15T10:30:00',
        price: 5999,
        stock: 100,
        category: '手机'
      },
      {
        id: 'P002', 
        name: 'MacBook Pro',
        email: 'product@apple.com',
        phone: '400-666-8800',
        status: 'active',
        createTime: '2024-01-10T14:20:00',
        price: 12999,
        stock: 50,
        category: '笔记本'
      },
      {
        id: 'P003',
        name: 'AirPods Pro',
        email: 'product@apple.com', 
        phone: '400-666-8800',
        status: 'inactive',
        createTime: '2024-01-05T16:45:00',
        price: 1999,
        stock: 0,
        category: '耳机'
      }
    ])

    // 模拟客户数据
    const customers = ref([
      {
        id: 'C001',
        name: '张三',
        email: 'zhangsan@example.com',
        phone: '13800138001',
        status: 'active',
        createTime: '2023-12-01T10:30:00',
        orderCount: 5,
        totalAmount: 15999
      },
      {
        id: 'C002',
        name: '李四',
        email: 'lisi@example.com',
        phone: '13800138002', 
        status: 'pending',
        createTime: '2024-01-01T14:20:00',
        orderCount: 0,
        totalAmount: 0
      }
    ])

    // 计算昨天的时间用于演示相对时间
    const yesterday = computed(() => {
      const date = new Date()
      date.setDate(date.getDate() - 1)
      return date
    })

    // 将产品数据转换为Customer组件需要的格式
    const transformProductToCustomer = (product) => {
      return {
        ...product,
        // Customer组件需要的字段已经在product中包含
      }
    }

    // 事件处理函数
    const addProduct = () => {
      ElMessage.info('添加产品功能')
    }

    const viewProduct = (product) => {
      ElMessage.success(`查看产品: ${product.name}`)
    }

    const editProduct = (product) => {
      ElMessage.info(`编辑产品: ${product.name}`)
    }

    const toggleStock = (product) => {
      product.status = product.status === 'active' ? 'inactive' : 'active'
      ElMessage.success(`产品 ${product.name} 已${product.status === 'active' ? '上架' : '下架'}`)
    }

    const addCustomer = () => {
      ElMessage.info('添加客户功能')
    }

    const viewCustomer = (customer) => {
      ElMessage.success(`查看客户: ${customer.name}`)
    }

    const editCustomer = (customer) => {
      ElMessage.info(`编辑客户: ${customer.name}`)
    }

    return {
      activeTab,
      testEmail,
      products,
      customers,
      yesterday,
      transformProductToCustomer,
      addProduct,
      viewProduct,
      editProduct,
      toggleStock,
      addCustomer,
      viewCustomer,
      editCustomer,
      // 导出工具函数供模板使用
      formatDate,
      getRelativeTime,
      isEmail,
      generateId,
      uniqueArray
    }
  }
}
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  color: #2c3e50;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.el-header {
  background-color: #fff;
  color: #333;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,.12);
  margin-bottom: 20px;
}

.el-header h1 {
  margin: 20px 0 10px 0;
  color: #67C23A;
}

.el-header p {
  margin: 0 0 20px 0;
  color: #909399;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 16px;
}

.section-header h2 {
  margin: 0;
  color: #303133;
}

.product-extra p,
.customer-extra p {
  margin: 4px 0;
  font-size: 14px;
}

.utils-demo {
  padding: 20px;
}

.demo-card {
  margin-bottom: 20px;
}

.demo-card h3 {
  margin: 0 0 16px 0;
  color: #303133;
}

.demo-card p {
  margin: 8px 0;
  color: #606266;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .section-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
}
</style>